<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<navbar myname="这是第一个" @clievent="handleEvent"></navbar>	
		</div>
	</body>
	<script type="text/javascript">
		//子组件
		Vue.component("navbar",{
			data(){
				return {
					money:10000,
				}
			},
			
			props:{
				myname:{
					type:String,
					default:"暂无数据"
				},
				isShow:{
					type:Boolean,
					default:true
				}
			},
			template:`
				<div>
					<h1>{{myname}}</h1>
					child- <button @click="give">把数据传给父组件</button>
				</div>
			`,
			methods:{
				//子组件的方法 
				give(){
					// $emit  触发了 组件中的方法
					this.$emit("clievent",this.money);
				},
			},
		});
		
		//父组件
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				//触发 点击事件
				handleEvent(data){
					console.log("孩子给父亲的钱",data);
				}
			}
		})
	</script>
</html>
